<template>
<!-- 通栏的头部 -->
   <div>
     <MyHeader icon="el-icon-s-order" text="我的订单" />
    <div class="indentContainer" >
        <div class="myIndent" v-for="(order,index) in myOrders" :key="order.skuId">
            <div class="headerContainer">
                <div class="left">订单编号: 46091632554285380</div>
                <div class="right">订单时间:{{order.createTime}}</div>
            </div>
            <el-table  :data="myOrders" style="width: 100%"  class="text" >
               <el-table-column stripe="true" align="center" >
                <template  class="img"  slot-scope="{row,$index}">
                    <img :src="row.imgUrl" style="width:100px;height:100px" >
                </template>
               </el-table-column>
                <el-table-column align="center" prop="skuName" label="商品名称"></el-table-column>
                <el-table-column align="center" prop="skuPrice" label="价钱" width="200"> </el-table-column>
                <el-table-column align="center" prop="skuNum" label="数量" width="200"> </el-table-column>
                <el-table-column align="center"  label="小计" width="200">
                  <template slot-scope="{row,$index}">
                    {{row.skuPrice * row.skuNum}}
                  </template>
                </el-table-column>
            </el-table>
            <div class="footer">
                <div class="left">共<i>{{order.skuNum}}</i>件商品</div>
              <div class="right">合计:<i class="total">{{order.skuNum * order.skuPrice}}元</i></div>
            </div>
        </div>
    </div>

   </div>
    
</template>

<script>
import {mapState} from "vuex"
export default {
   data() {
      return {
        // tableData: [{
        //   name:'手机',
        //   price:1999,
        //   number:1,
        //   subtotal:1999
        // }]
      }
    },
    mounted() {
      // 获取数据
      this.getData()
    },
    methods: {
      // 获取我的订单数据的回调
       getData(){
         this.$store.dispatch('getMyOrdersData')
      }
    },
    computed:{
      ...mapState({
        myOrders:state=>{
          if(state.myOrder.myOrders[0]){
            return state.myOrder.myOrders[0].cartInfoList
          }
        }
      })
    }
};
</script>

<style scoped>
.indentContainer {
  background-color:#EEEEEE;
  /* height:1000px; */
  width:100%;
  padding-top: 20px;
  margin-bottom: 50px;
}
.indentContainer .myIndent{
  background-color: #fff;
  width:1220px;
  /* height:100%; */
  margin: 0 auto;
  /* margin-top:10px */
}
.headerContainer{
  border-bottom: 1px solid #ff6700;
  /* position: relative; */
  height: 60px;
  /* height:40px;
  width: 100%; */
}
.headerContainer .left{
  /* padding-top: 20px; */
  padding: 20px 0px 20px 25px;
  height:100%;
  font-size:16px;
  color: #ff6700;
  float: left;
  
}

.headerContainer .right{
  height:100%;
  float: right;
  font-size:16px;
  color: #333;
  padding: 20px 25px 20px 0px;
  
  
}
.text{
  text-align: center;
  font-size: 16px;
  /* color: #000; */
}
/* text .img:hover{
  background-color: #fff !important;
} */
.text .photo{
  width: 100px;
  height: 100px;
  float: left;
  padding-left: 100px;
}
.text .name{
  float: right;
  padding:40px 290px 0 0 ;

}
.footer{
  
  border-top: 1px solid #ff6700;
  position: relative;
  height:40px;
  width: 100%;
}
.footer .left{
  color: #828482;
  margin-left: 10px;
  font-size: 16px;
  position: absolute;
  top: 10px;
  left:10px;
  bottom: 0;
  right: 0;
  height:100%;
}
.footer .left i{
  margin: 0 5px;
  
  color: #ff6700;
}
.footer .right{
  margin-right: 20px;
  color: #ff6700;
  float: right;
  height:100%;
  font-size:14px
}
.footer .right .total{
  margin-left: 10px;
  font-size:28px;
}
</style>